<template>
  <div
    class="empty-container f f-ai-c"
    :style="{
      color,
      fontSize: size,
      height,
      justifyContent:
        align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',
    }"
  >
    {{ text }}
  </div>
</template>
<script>
export default {
  name: "Empty",
  props: {
    // 内容
    text: {
      type: String,
      default: "暂无数据",
    },
    // 内容颜色
    color: {
      type: String,
      default: "#45f4ff",
    },
    // 字体大小
    size: {
      type: String,
      default: "24px",
    },
    // 高度
    height: {
      type: String,
      default: "100%",
    },
    // 对齐方式 left | right | center
    align: {
      type: String,
      default: "center",
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.empty-container {
  width: 100%;
}
</style>
